A5.buttonListshtml Method
Syntax
Arguments
- idstring
The ID to use for the button list.
- settingsobject
The settings to use to create the button.
- themestring
The theme to use on the button list.
- fillstring
By default no value is set. If a value of "width" is set then the buttons in the button list will grow to fill the available width. If a value of "height" is set then the buttons in the button list will grow to fill the available height.
- disabledboolean
If set to "true" then the button list will appear disabled. By default the value is false.
- buttonobject
The settings for the individual buttons in the button list.
- layoutstring
The layout of the button. A value of "icon text" (the default) or "text icon" which will layout the "icon" and "html" horizontally. A value of "icon" or "text" will only use only "icon" or "text" in the layout. A value of "icon/text" or "text/icon" will layout the "icon" and "html" vertically. A value of "icon-text" or "text-icon" will layout the "icon" and "html" horizontally, but align them to the left and right of the button with any additional width consumed in the center of the button. In all cases the "icon" will be automatically dropped if none is specified.
- stylestring
The CSS to put on the button.
- classNamestring
The class name to put on the button.
- firstClassNamestring
The class name to put on the first button in the list.
- middleClassNamestring
The class name to put on buttons in the list that are neither the first or last.
- lastClassNamestring
The class name to put on the last button in the list.
- hoverClassNamestring
The class name to put on the button when the user hovers over it.
- pressedClassNamestring
The class name to put on the button when the user presses it.
- selectedClassNamestring
The class name to put on the button when the button is selected.
- disabledClassNamestring
The class name to put on the button when the button is disabled.
- disabledSelectedClassNamestring
The class name to put on the button when the button is disabled and selected.
- iconStylestring
The CSS to put on the button icon.
- iconClassNamestring
The class name to put on the button icon.
- buttonsarray
An array of object containing the text, icon(s), state and value of each button in the button list.
- valueany
The value of the button.
- hideboolean
If true then the button will not appear in the list. The default is false.
- disabledboolean
If true then the button will not appear in the list. The default is false.
- htmlstring
The HTML to put in the button.
- iconstring
The icon to put in the button. See A5.u.icon.
- hoverIconstring
The icon to put in the button when the user hovers over it. See A5.u.icon.
- pressedIconstring
The icon to put in the button when it is pressed. See A5.u.icon.
- disabledIconstring
The icon to put in the button when it is disabled. See A5.u.icon.
- disabledSelectedIconstring
The icon to put in the button when it is disabled and selected. See A5.u.icon.
- tipstring
The TITLE attribute to put in the button that will appear as a tool tip when the user hovers over the button.
- valuesarrayany
The value(s) to select in the button list.
- attributesstring
Any other HTML attributes that want to be included on the BUTTON tags in the list. Two placeholders will be replaced for each specific button: "{index}" and "{value}", the index in the data and value of the button in the data respectively.
Returns
- htmlstring
The resulting HTML for the given button list.
Description
Create a button list HTML string.
Example
// assume cEle is an element into which the button list wants to be added
var html = A5.buttonLists.html('color',{theme: 'Alpha'},[
{html: 'Red', value: 'red'},
{html: 'Green', value: 'green'},
{html: 'Blue', value: 'blue'}
],'red','a5-item="color" a5-value="{value}"');
cEle.innerHTML = html;